<template>
    <el-form-item
        class="widget-view "
        v-if="element && element.key"
        :class="{active: selectWidget.key == element.key, 'is_req': element.options.required}"
        :label="element.name"
        @click.native.stop="handleSelectWidget(index)"
    >
        <template v-if="element.type == 'input'">
            <el-input
                v-model="element.options.defaultValueCName"
                :style="{width: element.options.width}"
                :placeholder="element.options.placeholder"
            />
        </template>

        <template v-if="element.type == 'textarea'">
            <el-input
                type="textarea"
                :rows="5"
                v-model="element.options.defaultValueCName"
                :style="{width: element.options.width}"
                :disabled="element.options.disabled"
                :placeholder="element.options.placeholder"
            />
        </template>

        <template v-if="element.type == 'number'">
            <el-input-number
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :controls-position="element.options.controlsPosition"
                :style="{width: element.options.width}"
            />
        </template>

        <template v-if="element.type == 'radio'">
            <el-radio-group
                v-model="element.options.defaultValue"
                :style="{width: element.options.width}"
            >
                <el-radio
                    :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                    :label="item.value"
                    v-for="(item, index) in element.options.options"
                    :key="item.value + index"
                >
                    {{ element.options.showLabel ? item.label : item.value }}
                </el-radio>
            </el-radio-group>
        </template>

        <template v-if="element.type == 'checkbox'">
            <el-checkbox-group
                v-model="element.options.defaultValue"
                :style="{width: element.options.width}"
            >
                <el-checkbox
                    :style="{display: element.options.inline ? 'inline-block' : 'block'}"
                    :label="item.value"
                    v-for="(item, index) in element.options.options"
                    :key="item.value + index"
                >
                    {{ element.options.showLabel ? item.label : item.value }}
                </el-checkbox>
            </el-checkbox-group>
        </template>

        <template v-if="element.type == 'time'">
            <el-time-picker
                v-model="element.options.defaultValue"
                :is-range="element.options.isRange"
                :placeholder="element.options.placeholder"
                :start-placeholder="element.options.startPlaceholder"
                :end-placeholder="element.options.endPlaceholder"
                :readonly="element.options.readonly"
                :disabled="element.options.disabled"
                :editable="element.options.editable"
                :clearable="element.options.clearable"
                :arrow-control="element.options.arrowControl"
                :style="{width: element.options.width}"
            />
        </template>

        <template v-if="element.type == 'date'">
            <el-date-picker
                v-model="element.options.defaultValue"
                :type="element.options.type"
                :is-range="element.options.isRange"
                :placeholder="element.options.placeholder"
                :start-placeholder="element.options.startPlaceholder"
                :end-placeholder="element.options.endPlaceholder"
                :readonly="element.options.readonly"
                :disabled="element.options.disabled"
                :editable="element.options.editable"
                :clearable="element.options.clearable"
                :style="{width: element.options.width}"
            />
        </template>

        <template v-if="element.type == 'rate'">
            <el-rate
                v-model="element.options.defaultValue"
                :max="element.options.max"
                :disabled="element.options.disabled"
                :allow-half="element.options.allowHalf"
            />
        </template>

        <template v-if="element.type == 'color'">
            <el-color-picker
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :show-alpha="element.options.showAlpha"
            />
        </template>

        <template v-if="element.type == 'select'">
            <el-select
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :multiple="element.options.multiple"
                :clearable="element.options.clearable"
                :placeholder="element.options.placeholder"
                :style="{width: element.options.width}"
            >
                <el-option v-for="item in element.options.options" :key="item.value" :value="item.value" :label="element.options.showLabel?item.label:item.value"/>
            </el-select>
        </template>

        <template v-if="element.type=='switch'">
            <el-switch
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
            />
        </template>

        <template v-if="element.type=='slider'">
            <el-slider
                v-model="element.options.defaultValue"
                :min="element.options.min"
                :max="element.options.max"
                :disabled="element.options.disabled"
                :step="element.options.step"
                :show-input="element.options.showInput"
                :range="element.options.range"
                :style="{width: element.options.width}"
            />
        </template>

        <template v-if="element.type=='imgupload'">
            <fm-upload
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :style="{'width': element.options.width}"
                :width="element.options.size.width"
                :height="element.options.size.height"
                token="xxx"
                domain="xxx"
            />
        </template>

        <template v-if="element.type == 'cascader'">
            <el-cascader
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :clearable="element.options.clearable"
                :placeholder="element.options.placeholder"
                :style="{width: element.options.width}"
                :options="element.options.remoteOptions"
            />
        </template>

        <template v-if="element.type == 'editor'">
            <fm-editor
                v-model="element.options.defaultValue"
                :width="element.options.width"
                :height="element.options.height"
            />
        </template>

        <template v-if="element.type=='img'">
            <div
                class="img-content"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'text-align': element.options.textAlign,
                    'background-color': element.options.backgroundColor
            }">
                <img
                    :src="element.options.defaultValue"
                    :style="{
                        'border-radius': element.options.borderRadius,
                        'width': element.options.width,
                        'height': element.options.height
                    }"
                >
            </div>
        </template>

        <template v-if="element.type=='title'">
            <h4
                class="title-content"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'display': element.options.inline ? 'inline-block': 'block',
                    'text-align': element.options.textAlign,
                    'color': element.options.color,
                    'font-size': element.options.fontSize,
                    'font-weight': element.options.Weight,
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight,
                    'height': element.options.height,
                    'line-height': element.options.lineHeight,}"
                v-html="element.options.defaultValueCName"/>
        </template>

        <template v-if="element.type=='tag'">
            <el-tag
                :type="element.options.type"
                :hit="element.options.hit"
                :color="element.options.tagColor"
                :size="element.options.size"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight
                }"
                v-html="element.options.defaultValueCName"/>
        </template>

        <template v-if="element.type=='button'">
            <el-button
                :type="element.options.type"
                :size="element.options.size"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight
                }"
                v-html="element.options.defaultValueCName"/>
        </template>

        <template v-if="element.type=='icon'">
            <i
                :class="['iconfont', element.options.iconName]"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'color': element.options.color,
                    'font-size': element.options.fontSize
            }"/>
        </template>

        <template v-if="element.type=='cell'">
            <div
                class="cell-content el-row"
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{
                    'color': element.options.color,
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight,
                    'background-color':element.options.backgroundColor,
                    'background-image':element.options.backgroundImage,
                    'background-repeat': 'no-repeat',
                    'background-size': 'cover',
            }">
                <div class="col col-img">
                    <div
                        class="left-img-content"
                        @mouseover="element.options.showHover = true"
                        @mouseout="element.options.showHover = false"
                        :class="{'hover-zoom': element.options.showHover}"
                        :style="{
                            'margin-right': element.options.imgMarginRight
                    }">
                        <img
                            v-if="element.options.imgType === 'image'"
                            :src="element.options.imgDefaultValue"
                            :style="{
                                'border-radius': element.options.borderRadius,
                                'width': element.options.imgWidth,
                                'height': element.options.imgHeight
                            }"
                        >
                        <i
                            v-else
                            :class="['iconfont', element.options.iconName]"
                            :style="{
                                'color': element.options.color,
                                'font-size': element.options.fontSize
                        }"/>
                    </div>
                </div>
                <div class="col col-text">
                    <div>
                        <h2 class="text-title" v-html="element.options.titleDefaultValue"/>
                        <p class="text-desc" v-html="element.options.descDefaultValue"/>
                    </div>
                </div>
            </div>
        </template>

        <template v-if="element.type=='ninecard'">
            <div
                class="ninecard-content"
                :style="{
                    'text-align': element.options.textAlign,
                    'background-color': element.options.backgroundColor}">
                <img
                    :src="element.options.imgDefaultValue"

                    :style="{
                        'border-radius': element.options.borderRadius,
                        'width': element.options.width,
                        'height': element.options.height,
                    }"
                >
                <h4
                    class="title-content"
                    :style="{
                        'color': element.options.color,
                        'font-size': element.options.fontSize,
                        'font-weight': element.options.Weight
                    }"
                    v-html="element.options.titleDefaultValue"/>
            </div>
        </template>

        <template v-if="element.type=='card'">
            <el-card class="box-card" :style="{'width':element.options.width}">
                <div slot="header" class="clearfix" style="">
                    <span>{{ element.options.titleDefaultValue }}</span>
                    <el-button style="float: right; padding: 3px 0" type="text">{{ element.options.optionButtonName }}</el-button>
                </div>
                <div v-for="item in element.options.defaultValue" :key="item" class="text item" style="font-size: 14px;margin-bottom: 18px;">
                    {{ '列表内容 ' + item }}
                </div>
            </el-card>
        </template>
        <template v-if="element.type=='card2'">
            <div :class="element.options.chioseColor" :style="{'width':element.options.width}">
                <!-- <div class="title-card" :class="element.options.chioseColor"></div>     -->
                <div class="row" id="row">
                    <div class="col-xs-12 text-right">
                        <div class="card-main-div" >
                            <div class="card-img-div" style=" background: url('') no-repeat;background-color:rgba(0,0,0,0.1)"/>
                            <div class="card-middle-div" style="">{{ element.options.titleDefaultValue }}</div>
                            <div class="card-text-div">
                                {{ element.options.cardValue }}
                            </div>
                            <div class="card-text-detail">
                                {{ element.options.detailValue }}
                            </div>
                        </div>
                        <div class="card-more-div">
                            <p>查看更多</p>
                        </div>
                    </div>
                </div>
            </div>
        </template>
        <template v-if="element.type=='card3'">
            <!-- :style="{
                    'color': element.options.color,
                    'margin-left': element.options.marginLeft,
                    'margin-right': element.options.marginRight,
                    'background-color':element.options.backgroundColor,
                    'background-image':element.options.backgroundImage -->
            <div class="card3-div" :style="{'background-color':element.options.backgroundColor,'width':element.options.width,'height':element.options.height}">
                <div class="card3-title" :style="{'text-align':'center','font-size':'25px'}">{{ element.options.titleDefaultValue }}</div>
                <div class="card3-title" :style="{'text-align':element.options.textAlign,'font-size': element.options.fontSize}">{{ element.options.cardValue }}</div>
            </div>
        </template>

        <template v-if="element.type=='card4'" >
            <div :class="element.options.chioseColor" :style="{'width':element.options.width,'border-radius':'8px','background-repeat': 'no-repeat','background-size':'100% 100%','overflow':'hidden'}">
                <!-- <div class="title-card" :class="element.options.chioseColor"></div>     -->
                <div class="row" id="row">
                    <div class="col-xs-12 text-right">
                        <div class="card-main-div" >
                            <!--<div class="card-img-div" style=" background: url('') no-repeat;background-color:rgba(0,0,0,0.1)"/>-->
                            <div class="card-img-div" style=" background: url('') no-repeat;background-color:transparent"/>
                            <div class="card4-middle-div" style="">{{ element.options.titleDefaultValue }}</div>
                            <div class="card4-text-div">
                                {{ element.options.cardValue }}
                            </div>
                            <div class="card-text-detail">
                                {{ element.options.detailValue }}
                            </div>
                        </div>
                        <!--<div class="card-more-div">
                            <p>查看更多</p>
                        </div>-->
                        <div class="card-more-div" style="height:42px;background-color:transparent"/>
                    </div>
                </div>
            </div>
        </template>
        <template v-if="element.type=='card5'">
            <div class="card5-box" :v-model="element.options.defaultValue" :style="{'width':element.options.boxWidth}">
                <div class="card5-point-title" >
                    <p> {{ element.options.label }}</p>
                </div>
                <div class="card5-point-content">
                    <p>{{ element.options.name }}</p>
                    <div class="card5-target-title" v-if="element.options.showTarget">{{ element.options.targetTitle }}：{{ element.options.target }}</div>
                    <div class="card5-target-rule" v-if="element.options.showRule">{{ element.options.ruleTitle }}:{{ element.options.rule }}</div>
                    <table class="card5-listTable" >
                        <tr v-for="(itmTr,idx) in element.options.options" :key="idx" >
                            <td :colspan="itmTd.colspan" :rowspan="itmTd.rowspan" v-for="(itmTd,idx) in itmTr.td" :key="idx+'c'">
                                <p> {{ itmTd.value }}</p>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </template>
        <!-- <template v-if="element.type == 'color'">
            <el-color-picker
                v-model="element.options.defaultValue"
                :disabled="element.options.disabled"
                :show-alpha="element.options.showAlpha"
            />
        </template> -->
        <template v-if="element.type=='FM1'">
            <div class="FM1-box">
                <div class="FM1-top">
                    <!-- <img  src='@/assets/images/prove/prove_header.png' /> -->
                    <img :src="element.options.imgDefaultValue">
                </div>
                <div class="FM1-content">
                    <p class="FM1-content-p1">{{ element.options.titleDefaultValue }}</p>
                    <div class="FM1-content-div1"><span class="FM1-content-span1">{{ element.options.detailValue }}</span> <span class="FM1-content-span2">{{ element.options.noticeValue }}</span></div>
                </div>
            </div>
        </template>

        <template v-if="element.type=='FM2'">
            <div class="FM2-box">
                <div class="FM2-left">
                    <!-- <img  src='@/assets/images/prove/prove_header.png' /> -->
                    <img :src="element.options.imgDefaultValue">
                </div>
                <div class="FM2-right">
                    <p class="FM2-right-p1">{{ element.options.titleDefaultValue }}</p>
                    <p class="FM2-right-p2"> {{ element.options.titleNotice }}</p>
                    <div class="FM2-right-bottom-box">
                        <p class="FM2-right-bottom-box-p1">
                            <span class="FM2-right-bottom-box-p1-span1">{{ element.options.detailValue }}</span>
                            <span class="FM2-right-bottom-box-p1-span2">{{ element.options.noticeValue }}</span>
                        </p>
                        <p class="FM2-right-bottom-box-p2">
                            {{ element.options.detailNotice }}
                        </p>
                    </div>
                </div>
            </div>
        </template>
        <template v-else-if="element.type=='detailTitle'">
            <div
                @click="goLink(element.options.linkType, element.options.linkUrl, element.options.query)"
                :style="{'margin-left': element.options.marginLeft,'margin-right': element.options.marginRight,'height': element.options.height,'line-height': element.options.lineHeight,'text-align': element.options.textAlign,'display': element.options.inline ? 'inline-block': 'block',}"
            >
                <span :style="{'fontSize':element.options.fontSizeTitle,'color':element.options.colorTitle,'font-weight':700}">{{ element.options.title }}</span>
                <span :style="{'fontSize':element.options.fontSizeContent,'color':element.options.colorContent}">{{ element.options.content }}</span>
            </div>
        </template>
        <template v-if="element.type=='blank'">
            <div style="height: 50px;color: #999;background: #eee;line-height:50px;text-align:center;">自定义区域</div>
        </template>

        <el-button title="删除" @click.stop="handleWidgetDelete(index)" class="widget-action-delete" v-if="selectWidget.key == element.key" circle plain type="danger">
            <!-- <icon name="icon-trash" style="width: 12px;height: 12px;"></icon> -->
            <i class="iconfont2 icon-trash"/>
        </el-button>
        <el-button title="复制" @click.stop="handleWidgetClone(index)" class="widget-action-clone" v-if="selectWidget.key == element.key" circle plain type="primary">
            <!-- <icon name="icon-icon_clone" style="width: 12px;height: 12px;"></icon> -->
            <i class="iconfont2 icon-icon_clone"/>
        </el-button>

    </el-form-item>
</template>

<script>
import FmUpload from './Upload'
import FmEditor from './Editor/tinymce'
export default {
    components: {
        FmUpload,
        FmEditor
    },
    props: ['element', 'select', 'index', 'data'],
    data() {
        return {
            selectWidget: this.select
        }
    },
    watch: {
        element(val) {
            console.log(val)
        },
        select(val) {
            this.selectWidget = val
        },
        selectWidget: {
            handler(val) {
                this.$emit('update:select', val)
            },
            deep: true
        }
    },
    mounted() {

    },
    methods: {
        goLink(type, url, query) {
            if (type === 'inline') {
                const param = query ? JSON.parse(query.replace(/'/g, '"')) : null
                this.gotoMyehrPath(url, param)
            } else {
                window.open(url)
            }
        },
        handleSelectWidget(index) {
            this.selectWidget = this.data.list[index]
        },
        handleWidgetDelete(index) {
            if (this.data.list.length - 1 === index) {
                if (index === 0) {
                    this.selectWidget = {}
                } else {
                    this.selectWidget = this.data.list[index - 1]
                }
            } else {
                this.selectWidget = this.data.list[index + 1]
            }

            this.$nextTick(() => {
                this.data.list.splice(index, 1)
            })
        },
        handleWidgetClone(index) {
            let cloneData = {
                ...this.data.list[index],
                options: { ...this.data.list[index].options },
                key: Date.parse(new Date()) + '_' + Math.ceil(Math.random() * 99999)
            }

            if (this.data.list[index].type === 'radio' || this.data.list[index].type === 'checkbox') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        options: cloneData.options.options.map(item => ({ ...item }))
                    }
                }
            }
            if (this.data.list[index].type === 'img' || this.data.list[index].type === 'title') {
                cloneData = {
                    ...cloneData,
                    options: {
                        ...cloneData.options,
                        style: { ...this.data.list[index].options.style }
                    }
                }
            }

            this.data.list.splice(index, 0, cloneData)

            this.$nextTick(() => {
                this.selectWidget = this.data.list[index + 1]
            })
        }
    }
}
</script>
